<template>
  <div class="user">
    <!-- 登录状态 -->
    <template v-if="token">
      <div class="user-poster">
        <p>欢迎</p>
      </div>
      <van-row class="user-links">
        <van-col span="6">
          <van-icon name="pending-payment" />待付款
        </van-col>
        <van-col span="6">
          <van-icon name="records" />待接单
        </van-col>
        <van-col span="6">
          <van-icon name="tosend" />待发货
        </van-col>
        <van-col span="6">
          <van-icon name="logistics" />已发货
        </van-col>
      </van-row>

      <van-cell-group class="user-group">
        <van-cell icon="records" title="地址管理" is-link to="/address" />
      </van-cell-group>

      <van-cell-group>
        <van-cell icon="points" title="我的积分" is-link />
        <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
        <van-cell icon="gift-o" title="我收到的礼物" is-link />
      </van-cell-group>

      <van-button type="danger" size="large" @click="logout">退出账号</van-button>
    </template>

    <!-- 没登录状态 -->
    <template v-else>
      <div class="noUserInfo">
        <van-button class="register" type="primary" size="mini" to="/register">注册</van-button>
        <p>
          已有账号?
          <router-link to="/login">登录</router-link>
        </p>
      </div>
    </template>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
// import { createNamespacedHelpers } from 'vuex'
// const { mapState,mapMutations } = createNamespacedHelpers('userModule')
export default {
  data(){
    return{
      token: localStorage.getItem("token") || ""
    }
  },
  // watch:{
  //   token:{
  //     handler(newVal){
  //       console.log(newVal)
  //     },
  //     immediate:true
  //   }
  // },
  computed:{
    // ...mapState(["token"])
  },
  methods:{
    // ...mapMutations(["REMOVE_TOKEN"]),
    logout(){//退出账号
      // this.REMOVE_TOKEN()
      this.$toast.success("退出成功")
    }
  },
  created(){
    this.$eventBus.$on("getToken",(res)=>{
      this.token = res
    })
  }
};
</script>

<style lang="scss">
@import "@/style/user/user";
</style>
